<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';

  export default defineComponent({
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '250px',
      },
    },
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

      const option = {
        tooltip: {},
        grid: {
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '8%',
          containLabel: true,
        },
        legend: {
          top: '-2%',
          itemGap: 50, //图例每项之间的间隔
          data: ['粉丝总量', '月销量'],
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                //color: '#f9f9f9',
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
            },
            axisTick: {
              show: false,
            },
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 7,
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     color: '#0a3256',
            //   },
            // },
            axisLine: {
              show: false,
            },
            axisLabel: {
              margin: 20,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '粉丝总量',
            type: 'line',
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 6,
            lineStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            itemStyle: {
              color: '#FC619D',
            },
            tooltip: {
              show: false,
            },
            data: [105, 180, 208, 284, 343, 388, 435, 465, 487, 531, 589, 669],
          },
          {
            name: '月销量',
            type: 'bar',
            barWidth: 10,
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: 'top',
            },
            itemStyle: {
              color: '#1990FF',
              borderRadius: 5,
            },
            data: [200, 282, 302, 367, 386, 315, 316, 386, 395, 416, 377, 509],
          },
        ],
      };

      onMounted(() => {
        setOptions(option as any);
      });
      return { chartRef };
    },
  });
</script>
